<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<div th:fragment="type">
  <div style="width: 96%;margin: 20px auto;flex-direction:column;justify-content:space-between">

    <div style="height:30px;display:flex;justify-content:space-between">
      <h2><b>类型管理</b></h2>
    </div>

    <hr style="border: 0; background-color: #ededed; height: 1px;margin: 20px 0" />

    <div style="margin-bottom: 20px;display: flex;justify-content:space-between;width:22%">
      <div>
        <el-input v-model="type.type" placeholder="请输入内容"></el-input>
      </div>
      <div>
        <el-button size="medium" type="primary" @click="add()">添加</el-button>
      </div>
    </div>
    <div>

      <el-table :data="types" border style="width: 100%">

        <el-table-column prop="type" label="类型" min-width="180"></el-table-column>

        <el-table-column prop="num" label="文章数量" min-width="180"></el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">

            <el-button size="mini" @click="update(scope.row);centerDialogVisible=true">编辑</el-button>

            <el-dialog title="修改类型" :close-on-press-escape="true" :visible.sync="centerDialogVisible" width="30%" center>
              <div>
                <el-input v-model="type.type" placeholder="请输入内容"></el-input>
              </div>
              <span slot="footer" class="dialog-footer">
            <el-button @click="quXia();centerDialogVisible = false">取 消</el-button>

            <el-button type="primary" @click="sub(scope.$index);centerDialogVisible = false">确 定</el-button>

        </span>
            </el-dialog>

          </template>
        </el-table-column>

      </el-table>

      <div style="margin-top: 10px">
        <el-pagination background :page-size="5" layout="prev, pager, next"
                       @current-change="pageChange" :total="total">
        </el-pagination>
      </div>

    </div>
  </div>
</div>
</body>
</html>